<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="风机名称" prop="turbineCode">
                <el-input v-model="queryParams.turbineCode" placeholder="请输入风机名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="风机型号" prop="turbineModel">
                <el-input v-model="queryParams.turbineModel" placeholder="请输入风机型号" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="所属电场" prop="location">
              <el-select v-model="queryParams.location" placeholder="所属电场" clearable style="width: 240px">
                <el-option v-for="device in orgListData" :key="device.windFarmId" :label="device.orgName" :value="device.windFarmId" />
              </el-select>
            </el-form-item>
            <el-form-item label="负责人" prop="responsiblePerson">
                <el-input v-model="queryParams.responsiblePerson" placeholder="请输入负责人" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="联系电话" prop="contactPhone">
                <el-input v-model="queryParams.contactPhone" placeholder="请输入联系电话" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['system:turbine:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['system:turbine:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                    @click="handleDelete" v-hasPermi="['system:turbine:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['system:turbine:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="turbineList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" width="80" align="center">
                <template slot-scope="scope">
                    {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="风机名称" align="center" prop="turbineCode" />
            <el-table-column label="风机型号" align="center" prop="turbineModel" />
            <el-table-column label="风机编号" align="center" prop="turbineNo" />
            <el-table-column label="所属电场" align="center" prop="orgName"/>
            <el-table-column label="安装日期" align="center" prop="installationDate" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.installationDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="投产日期" align="center" prop="commissioningDate" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.commissioningDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="制造商" align="center" prop="manufacturer" />
            <el-table-column label="负责人" align="center" prop="responsiblePerson" />
            <el-table-column label="联系电话" align="center" prop="contactPhone" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:turbine:edit']">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['system:turbine:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

        <!-- 添加或修改风力风机详细信息对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="1600px" style="height: 950px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <div style="display: flex;justify-content: space-between;">
                  <el-form-item label="所属电场" prop="location">
                    <el-select v-model="form.location" placeholder="所属电场" clearable style="width: 100%">
                      <el-option v-for="device in orgListData" :key="device.windFarmId" :label="device.orgName"
                                 :value="device.windFarmId" />
                    </el-select>
                  </el-form-item>
                    <el-form-item label="风机名称" prop="turbineCode" style="width: 30%;">
                        <el-input v-model="form.turbineCode" placeholder="请输入风机名称" />
                    </el-form-item>
                    <el-form-item label="风机编号" prop="turbineNo" style="width: 30%;">
                      <el-input v-model="form.turbineNo" placeholder="请输入风机编号" />
                    </el-form-item>
                    <el-form-item label="风机型号" prop="turbineModel" style="width: 30%;">
                        <el-input v-model="form.turbineModel" placeholder="请输入风机型号" />
                    </el-form-item>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <el-form-item label="安装位置_纬度" prop="latitude" style="width: 50%;">
                      <el-input v-model="form.latitude" placeholder="请输入安装位置_纬度" />
                  </el-form-item>
                  <el-form-item label="安装位置_经度" prop="longitude" style="width: 50%;">
                      <el-input v-model="form.longitude" placeholder="请输入安装位置_经度" />
                  </el-form-item>
                  <el-form-item label="安装日期" prop="installationDate" style="width: 50%;">
                      <el-date-picker clearable v-model="form.installationDate" type="date" value-format="yyyy-MM-dd"
                          placeholder="请选择安装日期" style="width: 100%;">
                      </el-date-picker>
                  </el-form-item>
                </div>
                <div style="display: flex;justify-content: space-between;">
                <el-form-item label="投产日期" prop="commissioningDate" style="width: 50%;">
                    <el-date-picker clearable v-model="form.commissioningDate" type="date" value-format="yyyy-MM-dd"
                        placeholder="请选择投产日期" style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="额定功率" prop="ratedPower" style="width: 50%;">
                    <el-input v-model="form.ratedPower" placeholder="请输入额定功率(kW)" />
                </el-form-item>
                <el-form-item label="累计发电量" prop="totalPowerGenerated" style="width: 50%;">
                    <el-input v-model="form.totalPowerGenerated" placeholder="请输入累计发电量(kWh)" />
                </el-form-item>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <el-form-item label="塔筒高度" prop="towerAltitude" style="width: 50%;">
                    <el-input v-model="form.towerAltitude" placeholder="请输入塔筒高度(m)" />
                  </el-form-item>
                  <el-form-item label="塔筒下半直径" prop="towerBottomDiameter" style="width: 50%;">
                      <el-input v-model="form.towerBottomDiameter" placeholder="请输入塔筒下半直径(m)" />
                  </el-form-item>
                  <el-form-item label="塔筒重量" prop="towerWeight" style="width: 50%;">
                      <el-input v-model="form.towerWeight" placeholder="请输入塔筒重量(吨)" />
                  </el-form-item>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <el-form-item label="单叶片长度" prop="bladeLength" style="width: 50%;">
                      <el-input v-model="form.bladeLength" placeholder="请输入单叶片长度(m)" />
                  </el-form-item>
                  <el-form-item label="单叶片直径" prop="bladeDiameter" style="width: 50%;">
                      <el-input v-model="form.bladeDiameter" placeholder="请输入单叶片直径(m)" />
                  </el-form-item>
                  <el-form-item label="单叶片重量" prop="bladeWeight" style="width: 50%;">
                      <el-input v-model="form.bladeWeight" placeholder="请输入单叶片重量(吨)" />
                  </el-form-item>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <el-form-item label="机舱长度" prop="nacelleLength" style="width: 50%;">
                      <el-input v-model="form.nacelleLength" placeholder="请输入机舱长度(m)" />
                  </el-form-item>
                  <el-form-item label="机舱宽度" prop="nacelleWidth" style="width: 50%;">
                      <el-input v-model="form.nacelleWidth" placeholder="请输入机舱宽度(m)" />
                  </el-form-item>
                  <el-form-item label="机舱高度" prop="nacelleAltitude" style="width: 50%;">
                      <el-input v-model="form.nacelleAltitude" placeholder="请输入机舱高度(m)" />
                  </el-form-item>
                  <el-form-item label="机舱重量" prop="nacelleWeight" style="width: 50%;">
                      <el-input v-model="form.nacelleWeight" placeholder="请输入机舱重量(吨)" />
                  </el-form-item>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <el-form-item label="轮毂长度" prop="hubHeight" style="width: 50%;">
                      <el-input v-model="form.hubHeight" placeholder="请输入轮毂长度(m)" />
                  </el-form-item>
                  <el-form-item label="轮毂宽度" prop="hubWidth" style="width: 50%;">
                      <el-input v-model="form.hubWidth" placeholder="请输入轮毂宽度(m)" />
                  </el-form-item>
                  <el-form-item label="轮毂高度" prop="hubAltitude" style="width: 50%;">
                      <el-input v-model="form.hubAltitude" placeholder="请输入轮毂高度(m)" />
                  </el-form-item>
                  <el-form-item label="轮毂重量" prop="hubWeight" style="width: 50%;">
                      <el-input v-model="form.hubWeight" placeholder="请输入轮毂重量(吨)" />
                  </el-form-item>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <el-form-item label="切入风速" prop="cutInWindSpeed" style="width: 50%;">
                      <el-input v-model="form.cutInWindSpeed" placeholder="请输入切入风速(m/s)" />
                  </el-form-item>
                  <el-form-item label="额定风速" prop="ratedWindSpeed" style="width: 50%;">
                      <el-input v-model="form.ratedWindSpeed" placeholder="请输入额定风速(m/s)" />
                  </el-form-item>
                  <el-form-item label="切出风速" prop="cutOutWindSpeed" style="width: 50%;">
                      <el-input v-model="form.cutOutWindSpeed" placeholder="请输入切出风速(m/s)" />
                  </el-form-item>
                  <el-form-item label="额定转速" prop="ratedSpeed" style="width: 50%;">
                    <el-input v-model="form.ratedSpeed" placeholder="请输入额定转速(m/s)" />
                  </el-form-item>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <el-form-item label="制造商" prop="manufacturer" style="width: 50%;">
                      <el-input v-model="form.manufacturer" placeholder="请输入制造商" />
                  </el-form-item>
                  <el-form-item label="负责人" prop="responsiblePerson" style="width: 50%;">
                      <el-input v-model="form.responsiblePerson" placeholder="请输入负责人" />
                  </el-form-item>
                  <el-form-item label="联系电话" prop="contactPhone" style="width: 50%;">
                      <el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
                  </el-form-item>
                </div>
                <el-form-item label="保修到期日" prop="warrantyExpiry">
                    <el-date-picker clearable v-model="form.warrantyExpiry" type="date" value-format="yyyy-MM-dd"
                        placeholder="请选择保修到期日" style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="备注" prop="notes">
                    <el-input v-model="form.notes" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listTurbine, getTurbine, delTurbine, addTurbine, updateTurbine } from "@/api/system/turbine"
import {findOrgList} from "@/api/system/shebei";

export default {
    name: "Turbine",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 风力风机详细信息表格数据
            turbineList: [],
            // 所属电场下拉
            orgListData: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                turbineCode: null,
                turbineModel: null,
                location: undefined,
                latitude: null,
                longitude: null,
                installationDate: null,
                commissioningDate: null,
                ratedPower: null,
                totalPowerGenerated: null,
                towerAltitude: null,
                towerBottomDiameter: null,
                towerWeight: null,
                bladeLength: null,
                bladeDiameter: null,
                bladeWeight: null,
                nacelleLength: null,
                nacelleWidth: null,
                nacelleAltitude: null,
                nacelleWeight: null,
                hubHeight: null,
                hubWidth: null,
                hubAltitude: null,
                hubWeight: null,
                cutInWindSpeed: null,
                ratedWindSpeed: null,
                cutOutWindSpeed: null,
                ratedSpeed: null,
                currentStatus: null,
                manufacturer: null,
                responsiblePerson: null,
                contactPhone: null,
                warrantyExpiry: null,
                notes: null,
                createdAt: null,
                updatedAt: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                turbineCode: [
                    { required: true, message: "风机名称不能为空", trigger: "blur" }
                ],
                turbineNo: [
                  { pattern: /^[1-9]\d*$/, message: '必须为数字值', trigger: 'blur' },
                  { required: true, message: "风机编号不能为空", trigger: "blur" }
                ],
                turbineModel: [
                    { required: true, message: "风机型号不能为空", trigger: "blur" }
                ],
                location: [
                    { required: true, message: "所属电场不能为空", trigger: "blur" }
                ],
                latitude: [
                    { required: true, message: "安装位置_纬度不能为空", trigger: "blur" }
                ],
                longitude: [
                    { required: true, message: "安装位置_经度不能为空", trigger: "blur" }
                ]
            }
        }
    },
    created() {
        this.getList()
        this.orgList()
    },
    methods: {
        /** 查询风力风机详细信息列表 */
        getList() {
            this.loading = true
            listTurbine(this.queryParams).then(response => {
                this.turbineList = response.rows
                this.total = response.total
                this.loading = false
            })
        },

        /** 查询所属电场编码集合 */
        orgList() {
          this.loading = true
          findOrgList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
              this.orgListData = response.data
            }
          )
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                turbineCode: undefined,
                turbineModel: undefined,
                location: undefined,
                latitude: undefined,
                longitude: undefined,
                installationDate: undefined,
                commissioningDate: undefined,
                ratedPower: undefined,
                totalPowerGenerated: undefined,
                towerAltitude: undefined,
                towerBottomDiameter: undefined,
                towerWeight: undefined,
                bladeLength: undefined,
                bladeDiameter: undefined,
                bladeWeight: undefined,
                nacelleLength: undefined,
                nacelleWidth: undefined,
                nacelleAltitude: undefined,
                nacelleWeight: undefined,
                hubHeight: undefined,
                hubWidth: undefined,
                hubAltitude: undefined,
                hubWeight: undefined,
                cutInWindSpeed: undefined,
                ratedWindSpeed: undefined,
                cutOutWindSpeed: undefined,
                ratedSpeed: undefined,
                currentStatus: undefined,
                manufacturer: undefined,
                responsiblePerson: undefined,
                contactPhone: undefined,
                warrantyExpiry: undefined,
                notes: undefined,
                createdAt: undefined,
                updatedAt: undefined
            }
            this.resetForm("form")
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm")
            this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = "添加风机"
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            const id = row.id || this.ids
            getTurbine(id).then(response => {
                this.form = response.data
                this.form.location = String(this.form.location);
                this.open = true
                this.title = "修改风机"
            })
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateTurbine(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功")
                            this.open = false
                            this.getList()
                        })
                    } else {
                        addTurbine(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功")
                            this.open = false
                            this.getList()
                        })
                    }
                }
            })
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids
            this.$modal.confirm('是否确认删除风机编号为"' + ids + '"的数据项？').then(function () {
                return delTurbine(ids)
            }).then(() => {
                this.getList()
                this.$modal.msgSuccess("删除成功")
            }).catch(() => { })
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/turbine/export', {
                ...this.queryParams
            }, `turbine_${new Date().getTime()}.xlsx`)
        }
    }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog{
  height: 88%!important;
  overflow: auto;
}
</style>
